<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Employee Info</title>
</head>
<body>

    <table id="dataTable" border="1" cellspacing="0" cellpadding="0" style="text-align: center;">
        <tr>
            <th colspan="5">Employee Info</th>
        </tr>
        <tr>
            <th>id</th>
            <th>lastName</th>
            <th>email</th>
            <th>gender</th>
            <th>options（<a th:href="@{/toAdd}">add</a>）</th>
        </tr>
        <tr th:each="employee : ${employeeList}">
            <td th:text="${employee.id}"></td>
            <td th:text="${employee.lastName}"></td>
            <td th:text="${employee.email}"></td>
            <td th:text="${employee.gender}"></td>
            <td>
                <a @click="deleteEmployee" th:href="@{'/employee/'+${employee.id}}">delete</a>
                <a th:href="@{'/employee/'+${employee.id}}">update</a>
            </td>
        </tr>
    </table>

    <form id="deleteForm" method="post">
        <input type="hidden" name="_method" value="delete">
    </form>

    ：
    <form th:action="@{/employee/1001}" method="post">
        <input type="hidden" name="_method" value="delete">
        <input type="submit" value="delete的最终理想目标效果样板：/employee/1001">
    </form>


   <!--
   前端如何实现，将参数放在超链接中来发送DELETE请求。 例如 delete  /user/1
    前提知识：
        1 点击超链接无法指定请求方式为DELETE
        2 form表单直接提交，参数是以?拼接在连接中，不是/号。
    方案设计：
        将拼接后的链接赋值给form表单的action。
        form表单的请求方式为POST。
        form表单中值要有一个<input type="hidden" name="_method" value="DELETE"> 即可。
        后台必须引入 HiddenHttpMethodFilter 过滤器。

    实现案例：
        在vue中，对超链接绑定一个点击事件，先阻止超链接的默认get行为跳转，在获得一个表单，表单中没有任何数据，只需要有一个
    <input type="hidden" name="_method" value="DELETE"> 即可。
    -->


    <script type="text/javascript" th:src="@{/static/js/vue.js}"></script>
    <script type="text/javascript">
        var vue = new Vue({
            el:"#dataTable",
            methods:{
                deleteEmployee:function (event) {
                    //根据id获取表单元素
                    var deleteForm = document.getElementById("deleteForm");
                    //将触发点击事件的超链接的href属性赋值给表单的action
                    deleteForm.action = event.target.href;
                    //提交表单
                    deleteForm.submit();
                    //取消超链接的默认行为
                    event.preventDefault();
                }
            }
        });
    </script>
</body>
</html>